<template>
  <div id="roomlist"> 

      <div class="demo" :style="{  height: dtheight + 'px' }" style="width:100%;">

          <div class="roombox">
               <div class="boxitem" v-for="(item,index) in datalist" :key="index">
                     <img :src="urlimg + item.cover" class="bg_img" />           
                     <div class="bottom_box"> 
                         <div v-if="item.head_img"><img :src="urlimg + item.head_img" class="tx_img" /> </div>
                         <div v-else><img src="@/assets/images/login_bg1.png" class="tx_img"  /> </div>
                        <div class="tx_text">{{ item.name  }}</div>
                     </div>

                     <div class="delect_box">
                          <i class="el-icon-delete" style="font-size: 26px;color:#F5CF49;" @click="delect_but(item.lrid)"></i>
                     </div> 
               </div>
          </div>
         
      </div>

   </div>
</template>

<script>

export default {
   name: 'roomlist',
   props:{
      datalist:{  
        //type:Array,
       default:()=>[]
     },
  },
  data () {
    return {
        dtheight:'500',  //窗口高度
    }
  },
   components:{

  },
  created(){
     this.dtheight = window.innerHeight - 293
      
  },
  mounted (){
    
  },
  methods: {
     delect_but(lrid){
          this.$confirm('是否删除此直播间?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
         }).then(() => {
            this.post("/live_video/delete", {
                    lrid:lrid,
                }).then(res => {
                    if(res.error_code == 0){
                        this.open1(res.result,'success')  //提示框
                        this.$emit('up_list_fun')
                    }else {
                        this.open1(res.message,'warning')
                }

             })
        }).catch(() => {
                //   this.$message({
                //     type: 'info',
                //     message: '已取消解冻'
                //   });          
        });
     }
  }
}
</script>


<style scoped>
.demo{
    overflow-y:auto;
}
/* .roombox{

} */
.boxitem{
    width:250px;
    height: 250px;
    float: left;
    margin-left: 20px;
    margin-top: 20px;
    border-radius:10px;
    position: relative;
}
.bg_img{
    width: 100%;
    height: 100%;
    border-radius:10px;
}
.bottom_box{
    position: absolute;
    bottom:0px;
    display: flex;
    align-items: center;
}
.tx_img{
    width: 45px;
    height: 45px;
}
.tx_text{
    color:white;
    margin-left: 10px;
}
.delect_box{
    position: absolute;
    top: 10px;
    right: 10px;
}
</style>